<template>
    <view>
		<button-comp className="mg20" type="primary" @onClick="onClick(1)">点我 单选</button-comp>
		<button-comp className="mg20" type="primary" @onClick="onClick(2)">点我 多选</button-comp>
		<button-comp className="mg20" type="default" @onClick="onClick(3)">点我 no thumb</button-comp>
		<button-comp className="mg20" type="primary" @onClick="onClick(4)">点我 fetch finderCode</button-comp>
		<select-box ref="selectRef"
					mode="right"
					:paramsKeys="paramsKeys"
					:checkedBox="checkedBox"
					:finderCode="finderCode"
					:needCheckbox="needCheckbox"
					:needThumb="needThumb"
					:width="width"
					@onChange="onChange"
					:compData="data"></select-box>
	</view>
</template>

<script>
    export default {
        name: "index",
		data(){
        	return {
				finderCode:'',
				width:250,
				checkedBox:'radio',
				needThumb:true,
				needCheckbox:true,
				data:[],
				paramsKeys:{
					name:'title',
					code:'note'
				}
			}
		},
		methods:{
			onClick(n){
				if(n===4){
					this.finderCode = 'xxx';
					this.$refs.selectRef.open();
					return ;
				}
				let data = [];
				if(n===2){
					this.checkedBox = 'checkbox'
				}else if(n===3){
					this.width = 200;
					this.needThumb = false;
					this.paramsKeys = {
						name:'title',
					}
				}
				for(let i=1;i<100;i++){
					data.push({
						id:`${i}`,
						name:`測試待機及解答${i}`,
						code:`123`
					})
				}
				this.data = data;
				this.$refs.selectRef.open();
			},
			onChange(values){
				console.log('change',values)
			}
		}
    }
</script>

<style scoped>

</style>
